{% extends "base.html" %}

{% block css %}
     <style>
        .account {
            width: 400px;
            margin: 0 ;
        }

        h1 {
            text-align: center;
        }

        .error-msg {
            color: red;
            position: absolute;
            font-size: 13px;
        }

    </style>
{% endblock %}

{% block bar %}
      <div class="col-md-9" style=  "justify-content: flex-end;">
            <h1 class="page-header">出版社管理页面</h1>
        <div class="panel panel-primary">
                <!-- Default panel contents -->
        <div class="panel-heading">添加出版社<i class="fa fa-thumb-tack pull-right"></i></div>
            <div  class="panel-body">
                 <!-
            </div>
      </div>
{% endblock %}

{% block main %}
<form action="" method="post" class="account" id="regForm">
     {% csrf_token %}
{#     <p>#}
{#         出版社名称 <input type="text" name="name">#}
{#     </p>#}
{#     <p>#}
{#         出版社地址 <input type="text" name="address">#}
{#     </p>#}
      {% for field in form %}
          {% if field.name != 'id' %}
             <div class="form-group">
                 <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                  {{ field }}
                 <span class="error-msg"></span>
             </div>
          {% endif %}
      {% endfor %}
    <p>
        <button type="button"  class="btn"  id="btnSubmit">提交</button>
    </p>
</form>
</body>

</html>
{% endblock %}
{% block js %}
    <script>
     $(function () {
            bindClickSubmit();
        })
    function bindClickSubmit() {
            $("#btnSubmit").click(function () {
                $('.error-msg').empty();
                $.ajax({
                    url: '{% url 'app01:add_publisher' %}',
                    type: 'POST',
                    data: $('#regForm').serialize(),
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            // 跳转到登录页面
                            location.href = res.data
                        } else {
                            // 错误 显示对应的错误信息
                            back=res.error
                            $.each(back, function (key, value) {

                                $('#id_' + key).next().text(value[0])
                            });
                        }
                    }
                });
            });
        }
    </script>
{% endblock %}